<template>
  <dv-full-screen-container>
    <div class="full-screen-container">
      <!-- 顶部导航栏 -->
      <div class="header">
        <HeaderPanel @startCenterPlayer="triggerCenterPlayer" />
      </div>

      <!-- 主体内容 -->
      <div class="content">
        <dv-border-box-11 title="实时监控" class="border-box">
          <div class="panel-container">
            <!-- 左侧面板 -->
            <div class="left">
              <LeftPanel :input-greenhouse-summary="greenhouseSummary"
                         :input-greenhouse-data="greenhouseData" />
            </div>
            <!-- 中间面板 -->
            <div class="center">
              <CenterPanel ref="CenterPanel" />
            </div>
            <!-- 右侧面板 -->
            <div class="right">
              <RightPanel :input-devices-config="devicesConfig"
                          :input-greenhouse-data="greenhouseData"
                          :input-line-chart="lineChart"/>
            </div>
          </div>
        </dv-border-box-11>
      </div>
    </div>
  </dv-full-screen-container>
</template>



<!--样式-->
<style scoped>
/* 全屏容器 */
.full-screen-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column; /* 垂直排列：顶部导航和主体 */
  background: linear-gradient(135deg, #000000, #222222);
  color: #ffffff; /* 默认字体颜色为白色 */
  font-family: 'Arial', sans-serif;
  box-sizing: border-box;
}

/* 顶部导航栏样式 */
.header {
  flex: 0 0 10%; /* 固定高度占页面10% */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 1); /* 深绿色背景，带半透明效果 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* 底部细线 */
}


/* 主体内容区域 */
.content {
  flex: 1; /* 主体内容占据剩余空间 */
  padding: 10px; /* 内边距 */
  box-sizing: border-box;
  display: flex;
}

/* dv-border-box-11 样式 */
.border-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row; /* 默认纵向排列 */
  font-weight: bold;
}

/* 面板容器 */
.panel-container {
  display: flex; /* 水平布局 */
  gap: 10px; /* 面板之间的间距 */
  width: 100%; /* 调整容器宽度，略微减少面板的宽度 */
  height: 100%; /* 调整容器的高度，使面板向下延伸 */
  box-sizing: border-box;
  padding-top: 30px; /* 保持顶部填充 */
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 15px;

}

/* 左侧面板 */
.left {
  flex: 3 0 0; /* 设置伸展、收缩和基础高度 */
  border-radius: 10px;
  display: flex;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  height: 100%; /* 填满父容器高度 */
  max-width: 100%; /* 限制最大宽度 */
  box-sizing: border-box;
}

/* 中间面板 */
.center {
  flex: 4 0 0; /* 设置伸展、收缩和基础高度 */
  border-radius: 10px;
  display: flex;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  height: 100%; /* 填满父容器高度 */
  max-width: 100%; /* 限制最大宽度 */
  padding-top: 30px;
  box-sizing: border-box;
}

/* 右侧面板 */
.right {
  flex: 3 0 0; /* 设置伸展、收缩和基础高度 */
  border-radius: 10px;
  display: flex;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  height: 100%; /* 填满父容器高度 */
  max-width: 100%; /* 限制最大宽度 */
  box-sizing: border-box;
}


/* 响应式设计：在较小屏幕上调整布局 */
@media (max-width: 768px) {
  .panel-container {
    flex-direction: column; /* 垂直排列 */
    gap: 20px; /* 增加间距 */
  }

  .left, .center, .right {
    flex: 1; /* 每个面板平分空间 */
  }
}
</style>



<!--行为-->
<script>
import HeaderPanel from './HeaderPanel.vue'
import LeftPanel from './RightPanel.vue'
import CenterPanel from './CenterPanel.vue'
import RightPanel from './LeftPanel.vue'
import axios from "axios";

export default {
  components: {
    HeaderPanel,
    LeftPanel,
    RightPanel,
    CenterPanel,
  },
  data() {
    return {
      greenhouseId: 300023040085, // 当前大棚ID
      devicesConfig: {}, // 存储设备配置信息
      greenhouseSummary: {}, // 存储大棚简略信息
      greenhouseData: {} ,// 存储大棚的各项数据
      lineChart: {},
    };
  },
  methods: {
    // 获取设备列表二维数组
    async fetchConfigData() {
      try {
        const response = await axios.get(`/greenhouse/devices/${this.greenhouseId}`);
        if (response.data && Array.isArray(response.data)) {
          this.devicesConfig = {
            header: ['设备名称', '设备ID', '设备类型'],
            headerHeight: 20,
            headerBGC: 'aqua',
            carousel: 'single',
            rowNum: 4, // 表格行数
            align: 'center',
            waitTime: 2000, // 轮播时间
            columnWidth: [180, 200, 100],
            data: response.data
          };
        } else {
          console.error('Invalid data format:', response.data);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        // 你可以在这里添加一个用户提示，例如弹出提示框
      }
    },

    // 获取大棚所有传感器数据
    async fetchGreenhouseData() {
      try {
        const response = await axios.get(`/data/allValues/${this.greenhouseId}`);
        if (response.data && typeof response.data === 'object') {
          this.greenhouseData = response.data;
          console.log("大棚信息" + this.greenhouseData["空气温度"]);
        } else {
          console.error('Invalid data format:', response.data);
        }
      } catch (error) {
        console.log("失败")
        console.error('Error fetching data:', error);
      }
    },

    async fetchGreenhouseSummary() {
      try {
        const response = await axios.get(`/greenhouse/summary/${this.greenhouseId}`);
        if (response.data && typeof response.data === 'object') {
          this.greenhouseSummary = response.data;
        } else {
          console.error('Invalid data format:', response.data);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }

    },
    async fetchLinChart() {
      try {
        const response = await axios.get(`/data/temperatures/${this.greenhouseId}`);
        if (response.data && typeof response.data === 'object') {
          this.lineChart = response.data;
        } else {
          console.error('Invalid data format:', response.data);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }

    },
    triggerCenterPlayer(){
      this.$refs.CenterPanel.init();
    }

  },
  watch: {
    // 当设备配置数据更新时，将其存储到 localStorage
    devicesConfigData(newVal) {
      localStorage.setItem('deviceConfigData', JSON.stringify(newVal));
    },

    // 当大棚数据更新时，将其存储到 localStorage
    greenhouseData(newVal) {
      localStorage.setItem('greenhouseData', JSON.stringify(newVal));
    },
    greenhouseSummary(newVal) {
      localStorage.setItem('greenhouseSummary', JSON.stringify(newVal));
    }
  },
  mounted() {
    // 当组件挂载后，获取设备配置信息和大棚数据
    this.fetchConfigData();
    this.fetchGreenhouseData();
    this.fetchGreenhouseSummary();
    this.fetchLinChart();
  }
};


</script>